<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>이미지</title>
	</head>

	<body style="background: yellow">
		<h1>이미지</h1>
		<img src="images/java7.jpg"
			alt="자바7서적이미지" 
			title="자바관련신간도서" />
			
		<img src="images/splash.png"
			alt="고양이" title="귀여운 고양이" />
		
		<img src="images/html5.jpg"
			alt="html5서적이미지" 
			title="html5관련신간도서" />
			
		<img src="images/suji/suji01.jpg"
			alt="수지뽀뽀이미지" 
			title="원진씨가 무척 좋아함"
			width="350px" height="350px" />
		<hr />
		<p><img src="images/java7.jpg"
			alt="자바7서적이미지" 
			title="자바관련신간도서"
			align="right" 
			width="50px" height="50px" />
		마이크로소프트(MS)가 윈도폰 점유율을 
		늘리기 위해 삼성전자에 파격적인 조건을 
		제안했다는 루머가 등장했다. 12일(현지시간) 
		샘모바일, BGR 등 IT매체들은 MS가 삼성전자에
		 윈도폰 생산을 조건으로 10억 달러(약 1조 원)
		  지원을 제안했다고 전했다.이 루머는 러시아
		   정보기술(IT) 전문 블로거 엘다 무르타친으로
		   부터 나온 것으로 그는 자신의 트위터 
		   계정에 "MS가 삼성에게 윈도폰 단말기를
		    생산한다면 10억 달러를 지원할 것이며
		     양측이 현재 이 방안을 놓고 협의중"이라고
		      밝혔다. 한편 MS는 노키아에게도 윈도폰을
		       탑재하는 조건으로 분기 당 2억 5000만
		       달러를 지불해왔다.</p>
	
	<hr />
		<figure>
			<img src="images/suji/suji01.jpg"
			alt="수지뽀뽀이미지" 
			title="???씨가 무척 좋아함"
			width="350px" height="350px" />
			<figcaption>
				그림 11-35. 뽀뽀하는 그림
			</figcaption>
		</figure>
	
		<hr />
		
		<figure>
			<img src="images/rilak01.gif" />
			<figcaption>
				그림 24-98. 움직이는 그림
			</figcaption>
		</figure>
		<hr />
		<img src="images/icons/apple.jpg" />
		<img src="images/icons/apple2.png" />
		<img src="images/icons/window.jpg" />
		<img src="images/icons/window2.png" />
		<hr />
		<figure>
			<img src="http://placehold.it/320x240" />
			<figcaption>의미없는 이미지</figcaption>
		</figure>
		<figure>
			<img src="https://www.google.co.kr/images/srpr/logo11w.png" />
			<figcaption>외부 이미지 가져와서 출력</figcaption>
		</figure>
		<!--
			img : image 이미지
			 다양한 이유로 웹 페이지에 이미지를 추가
 			로고, 사진, 삽화, 다이어그램, 차트등을 사용
 			CSS 를 이용해서 이미지 삽입 가능 (스프라이트)

			일반적으로 이미지 파일은 images 폴더에 저장
			
			img 태그로 이미지를 추가할 수 있음
			src 속성은 브라우저에게 이미지 위치를 알려줌
		 	alt 속성은 이미지를 볼 수 없는 경우 설명을 제공
		 	title 속성은 이미지에 대한 추가 정보 제공
		
			이미지의 크기는 height, width 속성으로 지정
		 이미지 크기 단위는 픽셀px로 지정
		
			align 속성을 이용하면 페이지의 다른 요소를
		 이미지 주위에 정렬시킬 수 있음
		    좌우 : left, right
		    상하 : top , bottom

 			figure 태그로 이미지와 캡션을 하나로 묶을 수 있음
 			figcaption 태그로 이미지에 캡션을 추가할 수 있음
 			html5에 새롭게 추가
			
			이미지는 jpeg, gif, png 형식을 사용
		 이미지의 크기대로 페이지에 표시
		 올바른 해상도(72 - 96 dpi)를 사용할 것
		    인쇄물은 150 ~ 300dpi 해상도를 사용
		
		 	jpeg : 다양한 색상으로 구성된 사진
 			gif/png : 동일한 색상이 넓은 영역에 분포 (로고등)

			애니메이션 GIF
		 이미지를 프레임 단위로 연속해서 보여줌
		 이를 이용해서 간단한 애니메이션을 만들 수 있음
		
			이미지 투명도
		 웹에서 부분적으로 투명하거나
		 비치는 이미지는 투명 GIF나
		 반투명 PNG 로 만들 수 있음
		
			간단한 이미지 작업용 도구
			photoshop CC (너무 무거움)
			paint.net			(추천)
			pixlr.com		(웹기반-간편함)
		 -->
	</body>
</html>







